<template>
  <div class="historyRankList">
    <div class="back" v-if="isWechat===false">
      <button class="back_icon" @click="back"></button>
    </div>
    <div class="rankListTopBg" style="top:0px;">
      <img class="bg_top_img2" src="../assets/bg_historyRandList.jpg" alt="">
      <!-- <img class="bg_top_img1" src="https://hnres.etalk365.com/app/image/activity_pic/ranklist_top.jpg" alt=""> -->
      <!-- <img class="ranklist_topText" src="../assets/ranklist_topText.png" alt="" @load="getBtnBoxTop"> -->
      <!-- <p class="goToRule" @click="checkRule">活动规则 > </p> -->
    </div>
    <div class="btnBox" style="top:0px;">
      <div class="imgBox">
        <mt-datetime-picker
          ref="picker"
          v-model="pickerVisible"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          :endDate="new Date('2018-05-29')"
          :startDate="new Date('2018-05-18')"
          @confirm="handleConfirm">
        </mt-datetime-picker>
        <p class="btn_chooseDate" @click="openPicker">选择日期</p>
      </div>
      <div class="date">
        <p>{{nowDate}}排行榜</p>
      </div>
    </div>
    <div class="content" style="top:0px;">
      <div v-if="rankType === 'history'" class="BOXBOX">
        <div class="rank_2nd">
          <!-- 第二名 -->
          <div class="Avatar_box" id="Avatar_box_2nd">
            <RankBox2Nd class="second" v-if="dailyRankList[1]" :player="dailyRankList[1]" :type="rankType"/>
          </div>
        </div>
        <div class="rank_1st">
          <!-- 第一名 -->
          <div class="Avatar_box" id="Avatar_box_1st">
            <RankBox1St v-if="dailyRankList[0]" :player="dailyRankList[0]" :type="rankType" class="first"></RankBox1St>
          </div>
        </div>
        <div class="rank_3rd">
          <!-- 第三名 -->
          <div class="Avatar_box" id="Avatar_box_3rd">
            <RankBox3Rd v-if="dailyRankList[2]" :player="dailyRankList[2]" :type="rankType" class="third"/>
          </div>
        </div>
      </div>
      <ul
        class="rankListUl"
        v-if="rankType === 'history'"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li></li>
        <li v-if="index > 2" v-for="(item, index) of dailyRankList" :key="index">
          <div class="listItem">
            <RankListItem :index="index" :type="rankType" :player="item"></RankListItem>
          </div>
        </li>
      </ul>
    </div>
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut quick">
      <div class="myself" v-if="(dailyRankList.length > 0 || allRankList.length > 0) && beforTouch === false">
        <div class="listItem">
          <RankListItem :type="rankType" :player="mySelf" :index="1" :rankNumber="mySelf.rankNumber"></RankListItem>
        </div>
      </div>
    </transition>
    <!-- <div class="RankListBottom">
      <RankListBottom v-if="baseInfo !== ''" :baseInfo="baseInfo" :t="token" @toShowOff="toShowOff"></RankListBottom>
    </div> -->
    <!-- <div class="showoff" v-if="showoff">
      <div class="showoffContent">
        <div class="showoffBgWrap">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX2">
          </div>
          <div class="bg_showoff_top">
            <p>分享得次数</p>
          </div>
          <div class="bg_showoff_bottom">
            <div style="height:0.6rem;"></div>
            <p style="color:#AA8A8A;font-size: 0.25rem;width:80%;">每邀请一位非Etalk学员参加活动,可增加一次基础挑战机会,挑战次数无上限</p>
            <div class="shareBtnWrap">
              <button v-if="isWechat===false" class="btn_shareFrineds" @click="getQart(0)"></button>
              <button v-if="isWechat===false" class="btn_shareFrinedsCircle" @click="getQart(1)"></button>
            </div>
            <span style="text-indent: 0.4rem;display: block;color:#7A585C;">已成功邀请好友:</span>
            <div class="myFriendsList">
              <div class="myFrinendsWrap">
                <ul>
                  <li v-for="(item, index) of myFriendList" :key="index">
                    <div class="listItem">
                      <myFriendsItem :player="item" :index="index + 1000"></myFriendsItem>
                    </div>
                  </li>
                  <li v-if="myFriendList.length===0" v-for="item in 3" :key="item">
                    <div class="unyaoqing">
                      <div class="unyaoqingAvatarItem"></div>
                      <span>待邀请</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showDom" id="qrcode" ref="qrimg" ></div>
      <canvas v-show="showDom" ref="finalyc" width="375" height="667"></canvas>
    </div> -->
    <!-- <div class="weChatBg" v-if="weChatShowOff" @click="weChatShowOff=false">
      <img src="../assets/weChatBg.png" alt="">
    </div> -->
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import GetToken from '../util/getToken'
import {InfiniteScroll, Indicator, DatetimePicker} from 'mint-ui'
import RankBox1St from '../components/RankBox1St'
import RankBox2Nd from '../components/RankBox2Nd'
import RankBox3Rd from '../components/RankBox3Rd'
import RankListItem from '../components/RankListItem'
import RankListBottom from '../components/RankListBottom'
import {getHistoryRank, getMyFriends} from '../request/question'
import myFriendsItem from '../components/myFriendsItem'
// import AppBradge from '../util/appBradge'
// import QRCode from 'qrcodejs2'
export default {
  name: 'historyRankList',
  directives: {
    InfiniteScroll,
    mtDatetimePicker: DatetimePicker
  },
  components: {
    RankBox1St,
    RankBox2Nd,
    RankBox3Rd,
    RankListItem,
    RankListBottom,
    myFriendsItem
  },
  data () {
    return {
      msg: 'value',
      rankType: 'history',
      // dailyRankList: [1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 5, 165, 1651, 651, 655, 1655, 1651, 6551, 651, 651, 651, 651, 651, 651, 56, 161, 651, 651, 651651651, 651, 651],
      slideUp: 0,
      opacity: 1,
      btnBoxTop: '',
      rate: '',
      beforTouch: true,
      moveStart: false,
      toptop: 0,
      dailyRankList: [],
      allRankList: [],
      page: 1,
      allTypePage: 1,
      showoff: false,
      myFriendList: [],
      imgBase64: '',
      showDom: false,
      mySelf: {},
      isWechat: false,
      weChatShowOff: false,
      nowDate: '',
      loadList: false,
      requestDate: '',
      pickerVisible: '2018-05-18',
      yesterday: ''
    }
  },
  computed: {
    ...mapGetters([
      'baseInfo',
      'token'
    ]),
    newDate (direction) {
      return 1
    }
  },
  mounted () {
    let today = new Date() // (new Date()).getMonth() + 1 + '月' + (new Date()).getDate() + '日'
    this.nowDate = today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + (today.getDate() - 1) + '日'
    this.requestDate = today.getFullYear() + ((today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1)) + (today.getDate() < 10 ? '0' + (today.getDate() - 1) : (today.getDate() - 1))
    // TODO: 没有判断是 01 日时减月份的情况
    this.yesterday = today.getFullYear() + '-' + ((today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1)) + '-' + (today.getDate() < 10 ? '0' + (today.getDate() - 1) : (today.getDate() - 1))
    // this.toptop = document.getElementsByTagName('li')[0].getBoundingClientRect().top
    // this.toptop = 0
    if (this.$debugToken) {
      this.$store.dispatch('getToken', this.$debugToken)
    } else if (this.token) {
      this.$store.dispatch('getToken', this.token)
    } else {
      GetToken.getToken(this).then((data) => {
        this.$store.dispatch('getToken', data.tokenString)
      })
    }
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
  },
  methods: {
    handleConfirm () {
      console.log(this.pickerVisible, 1111111111111)
      let chooseDate = new Date(this.pickerVisible)
      this.nowDate = chooseDate.getFullYear() + '年' + (chooseDate.getMonth() + 1) + '月' + chooseDate.getDate() + '日'
      // TODO: 没有判断是 01 日时减月份的情况
      this.loadList = false
      this.page = 1
      this.requestDate = chooseDate.getFullYear() + ((chooseDate.getMonth() + 1) < 10 ? '0' + (chooseDate.getMonth() + 1) : (chooseDate.getMonth() + 1)) + (chooseDate.getDate() < 10 ? '0' + chooseDate.getDate() : chooseDate.getDate())
      this.dailyRankList = []
      this.loadMore()
    },
    openPicker () {
      this.$refs.picker.open()
    },
    checkRule () {
      this.$router.push({name: 'SignUp', query: {checkRule: 'yes'}})
    },
    toShowOff () {
      if (this.isWechat) {
        this.weChatShowOff = true
        // Toast({
        //   message: '次数已用完,登陆Etalk APP邀请得次数',
        //   duration: 2000
        // })
      } else {
        getMyFriends({tokenString: this.token}).then(data => {
          if (Number(data) === 0) {
            this.showoff = true
          } else if (data.recommendedInformation.length > 0) {
            this.myFriendList = []
            data.recommendedInformation.map((item1, index) => {
              data.recommendedUser.map((item2, index) => {
                if (item1.uid === item2.personId) {
                  this.myFriendList.push(Object.assign(item1, item2))
                }
              })
            })
            this.showoff = true
          }
        })
      }
    },
    btnX2 () {
      this.showoff = false
    },
    back () {
      // AppBradge.deleteWebView()
      this.$router.push({name: 'RankList'})
      // this.$router.push({name: 'SignUp', query: {look: 'yes'}})
    },
    loadMore () {
      if (this.page <= 5 && this.rankType === 'history') {
        if (this.loadList) {
          return
        }
        this.loadList = true
        this.getDailyRankList()
      }
    },
    getDailyRankList () {
      Indicator.open({
        text: '读取排名列表中...',
        spinnerType: 'fading-circle'
      })
      getHistoryRank({tokenString: this.token, page: this.page, size: 10, recordTime: this.requestDate}).then((data) => {
        this.loadList = false
        this.page++
        let rankInformationList = data.rankRecordList
        let userInformationList = data.userInformationList
        if (rankInformationList.length > 0) {
          rankInformationList.map((item, index) => {
            for (let i = 0; i < rankInformationList.length; i++) {
              if (userInformationList[i] && item.uid === userInformationList[i].personId) {
                Object.assign(item, userInformationList[i])
              }
            }
          })
        }
        this.dailyRankList = [...this.dailyRankList, ...rankInformationList]
        Indicator.close()
      })
    },
    getAllRankList () {
    },
    switchRankType (type) {
      this.rankType = type
      this.page = 1
      this.allRankList = []
      this.dailyRankList = []
      this.allTypePage = 1
      if (this.rankType === 'all') {
        this.getAllRankList()
        this.getMyself(1)
      } else if (this.rankType === 'daily') {
        this.getDailyRankList()
        this.getMyself(0)
      }
    }
    // topBgSlideUp (e) {
    //   let rankListTopBg = document.getElementsByClassName('rankListTopBg')[0]
    //   // let bgTopImg1 = document.getElementsByClassName('bg_top_img1')[0]
    //   let content = document.getElementsByClassName('content')[0]
    //   let btnBox = document.getElementsByClassName('btnBox')[0]
    //   let firstLi = document.getElementsByTagName('li')[0]
    //   // const target = e.currentTarget
    //   // firstLi.getBoundingClientRect().top
    //   let y = e.targetTouches[0].clientY
    //   // console.log(firstLi.getBoundingClientRect().top)
    //   content.ontouchmove = (e) => {
    //     let yMove = e.targetTouches[0].clientY
    //     if (yMove - y < 0 && rankListTopBg.style.top === '0px') {
    //       if (this.beforTouch === false) { return }
    //       // bgTopImg1.style.transition = 'all 1s'
    //       rankListTopBg.style.transition = 'all 0.3s'
    //       content.style.transition = 'all 0.3s'
    //       btnBox.style.transition = 'all 0.3s'
    //       rankListTopBg.style.top = '-2.58rem'
    //       content.style.top = '-2.58rem'
    //       btnBox.style.top = '-2.58rem'
    //       this.beforTouch = false
    //       // bgTopImg1.style.opacity = 0
    //     } else if (yMove - y > 0 && firstLi.getBoundingClientRect().top * 2 + 50 >= this.toptop) {
    //       if (this.beforTouch) { return }
    //       this.beforTouch = true
    //       // bgTopImg1.style.transition = 'all 0s'
    //       // bgTopImg1.style.opacity = 1
    //       rankListTopBg.style.transition = 'all 0.3s'
    //       content.style.transition = 'all 0.3s'
    //       btnBox.style.transition = 'all 0.3s'
    //       rankListTopBg.style.top = '0px'
    //       content.style.top = '0px'
    //       btnBox.style.top = '0px'
    //     }
    //   }
    // },
    // getQart (shareType) { // 这个是点击分享
    //   /**
    //     auther: cmyh
    //     创建二维码
    //     之所以生成的二维码密度大，有俩点原因：
    //     内容过多。
    //     选择了高比例的错误修正。
    //     容错级别，可设置为：
    //     QRCode.CorrectLevel.L
    //     QRCode.CorrectLevel.M
    //     QRCode.CorrectLevel.Q
    //     QRCode.CorrectLevel.H
    //   **/
    //   // Indicator.open({
    //   //   text: '合成二维码中...',
    //   //   spinnerType: 'fading-circle'
    //   // })
    //   // Indicator.close()
    //   if (shareType === 0) {
    //     this.$store.dispatch('zhugeWxshareFriends')
    //   } else {
    //     this.$store.dispatch('zhugeWxshareFriendsQuan')
    //   }
    //   if (this.$data.imgBase64 !== '') {
    //     // Indicator.close()
    //     this.shareMethod(shareType)
    //   } else {
    //     let qrcode = new QRCode(document.getElementById('qrcode'), {
    //       width: 100, // 设置宽高
    //       height: 100,
    //       colorDark: '#000000',
    //       colorLight: '#ffffff',
    //       correctLevel: QRCode.CorrectLevel.M
    //     })
    //     // https://metalk.etalk365.com/superwordfile/#/signup
    //     let shareUrl = 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97'
    //     qrcode.makeCode(shareUrl)
    //     let qrimg = this.$refs.qrimg.children[1]
    //     let bg = new Image()
    //     bg.src = require('../assets/shareHaibao.jpg') // require('../assets/shareHaibao.jpg') // 'https://hnres.etalk365.com/app/image/activity_pic/invitation.jpg'
    //     let codePromise = new Promise((resolve, reject) => {
    //       qrimg.onload = () => {
    //         resolve(1)
    //       }
    //       qrimg.onerror = () => {
    //         resolve(0)
    //       }
    //     })
    //     let bgPromise = new Promise((resolve, reject) => {
    //       bg.onload = () => {
    //         resolve(1)
    //       }
    //       bg.onerror = () => {
    //         resolve(0)
    //       }
    //     })
    //     Promise.all([codePromise, bgPromise]).then(data => {
    //       // Indicator.close()
    //       if (Number(data[0]) === 1) {
    //         this.composeQr(qrimg, bg, shareType)
    //       } else {
    //         this.composeQr(qrimg, bg, shareType)
    //       }
    //     })
    //   }
    //   // this.imgPreloadingAct()
    // },
    // composeQr (img, bg, shareType) {
    //   // 合成最终专属二维码图片
    //   try {
    //     let c = this.$refs.finalyc
    //     let ctx = c.getContext('2d')
    //     // let imgbg = this.$refs.qrbg
    //     ctx.drawImage(bg, 0, 0)
    //     ctx.fillStyle = '#fff'
    //     // ctx.fillRect(255, 1044, 240, 240)
    //     ctx.drawImage(img, 137, 532)
    //     // ctx.drawImage(img, 275, 437)
    //     this.$data.imgBase64 = c.toDataURL('image/jpeg')
    //     this.shareMethod(shareType)
    //   } catch (e) {
    //     console.log(e)
    //   }
    // },
    // shareMethod (shareType) {
    //   AppBradge.wxshare(shareType, this.$data.imgBase64).then((type) => {
    //     let msg = ''
    //     switch (type * 1) {
    //       case 0:
    //         msg = '分享成功'
    //         break
    //       case -1:
    //         msg = '发送失败'
    //         break
    //       case -2:
    //         msg = '您取消了'
    //         break
    //       case -3:
    //         msg = '发送失败'
    //         break
    //       case -4:
    //         msg = '授权失败'
    //         break
    //       case -5:
    //         msg = '微信不支持'
    //         break
    //     }
    //     console.log(msg)
    //     Toast({
    //       message: msg,
    //       duration: 1500
    //     })
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/ranklist';
.historyRankList{
  position: absolute;
  height:100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}
.showoff{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  font-size: 0.3rem;
  .afterQuestionShowoff{
    position: absolute;
    font-size: 0;
    width: 80%;
    left: 10%;
    top: 45%;
    transform: translateY(-50%);
  }
  .btnX{
    position: absolute;
    right: 10%;
    transform: translateY(-110%);
    img{
      width:60%;
    }
  }
}
.bg_showoff_top{
  position: relative;
  z-index:2;
  height: 2rem;
  width: 100%;
  background: url('../assets/bg_result_top.png');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  font-size: 0.45rem;
  text-align: center;
  p{
    padding-top:0.9rem;
    font-weight: 600;
  }
}
.showoffContent{
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.showoffBgWrap{
  width:80%;
  margin-left: 10%;
}
.bg_showoff_bottom{
  position: relative;
  z-index:1;
  width: 94%;
  height:6.8rem;
  left:3%;
  top:-0.5rem;
  background: white;
  border-radius: 0.3rem;
  overflow: hidden;
  p{
    width:85%;
    margin: 0 auto;
    padding: 0.2rem;
    background: #FFE2DE;
    border-radius: 0.3rem;
    box-shadow: 0 0.1rem 0 #FFBFCD;
  }
}
.shareBtnWrap{
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  margin-top: 0.4rem;
}
.btn_shareFrineds{
  background-image: url('../assets/btn_shareFriends.png')
}
.btn_shareFrinedsCircle{
  background-image: url('../assets/btn_shareFriendCircle.png')
}
.btn_shareFrineds,
.btn_shareFrinedsCircle{
  width:45%;
  height: 0.8rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.myFriendsList{
  // margin-top: 0.1rem;
  height: 2.8rem;
  overflow: scroll;
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  width: 80%;
  border-radius: 0.3rem;
  margin: 0px auto;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  span{
    display: block;
    text-indent: 0.2rem;
  }
}
.showoff{
  .listItem{
    margin-top: 0.1rem;
    background: white;
    margin-left: 3%;
    // margin-right: 0.23rem;
    // height: 0.9rem;
    // line-height: 0.35rem;
    border-radius: 0.45rem;
    width: 94%;
    height: 100%;
    .correctNumRnak{
      margin-left: 0.2rem;
    }
  }
}
.quick{
  animation-duration: 0.4s;
}
.unyaoqing{
  background: white;
  height: 0.8rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 0.1rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  .unyaoqingAvatarItem{
    width: 0.7rem;
    height: 0.7rem;
    // border:1px solid red;
    border-radius: 100%;
    margin-left: 0.5rem;
    margin-top: 0.05rem;
    background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  }
  span{
    font-size: 0.25rem;
    color: rgb(170, 138, 138);
  }
}
.myFrinendsWrap{
  li{
    height:0.85rem;
  }
}
.weChatBg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index:9999;
  img{
    width:90%;
    display: block;
    margin: 0 auto;
  }
}
.goToRule{
  position: fixed;
  font-size: 0.25rem;
  right: 0.2rem;
  top: 0.7rem;
  color: white;
}
.back_icon{
  z-index:1;
}
.bg_top_img2{
  position: relative;
  bottom:0;
  // z-index:1;
  transition: opacity 1s;
}
.btn_chooseDate{
  font-size: 0.3rem;
  background: #ff6679;
  line-height: 0.6rem;
  padding: 0 0.3rem;
  border-radius: 0.5rem;
  color: white;
  font-weight: bold;
  box-shadow: 0 0.08rem 0 rgba(161,70,70,0.5);
}
</style>
